<!doctype html>
<html lang="en" style='padding: 0;margin: 0;'>
<head>
  <meta charset="UTF-8">
  <title>给我留言</title>
  <link rel="icon" href="{{STATIC_URL}}/nian/img/logo.ico" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type='text/css'>
    a{color: #74cddb;text-decoration: none;}
    
    .tarea-container {
        width:600px;
        height:220px;
        border:0px solid #cccccc;
        margin-top: 0px;
    }
    
    .tarea-container textarea{
        background-color: #fcfcfc;
        width: 600px;
        height:200px;
        border:1px solid #52a67b;
    }
    
    .input-container {
        width:600px;
        height: 50px;
        margin-top: 20px;
    }
    
    .input-container input[type=text] {
        width:600px;
        height:35px;
        border:1px solid #52a67b;
    }
    
    .input-container input[type=submit] {
        background-color: #52a67b;
        width:80px;
        height:30px;
        font-size: 16px;
        color: #fff;
        border:0;
    }
    
    .success-message {
        margin-bottom: 10px;
        padding: 5px;
        color: #808080;
    }
    
  </style>
 
</head>
<body style="padding: 0;margin: 0;padding-bottom: 30px; font-family: 'HelveticaNeue-Light','Helvetica Neue', Helvetica, 'Segoe UI Light', 'Segoe UI', 'Segoe WP'">

  <div class="top" style="background-color: #52a67b; text-align: center; ">
    <h1 style="margin: 0; padding: 27.5px 0; ">
      <span style="font-site: 15px;color: #fff;">咚咚, 用声音表达思念</span>
    </h1>
  </div>

  <div class="wrapper" style="width: 640px;
    margin: 0 auto;
    max-width: 100%;">

    <div class="container" style="width: 640px; max-width: 100%; margin: 0 auto; ">
      
      <div id="suc_msg">
        {% for message in messages %}
            {% if status == 1 %}
            <div class="success-message">
                <p><img src="{{STATIC_URL}}/nian/img/success_ico.png" height="15" width="15" /> {{ message }}</p>
            </div>
            {% else %}
            <div class="success-message">
                <p> {{ message }}&nbsp; : (</p>
            </div>   
            {%  endif %}
        {% endfor %}
      </div>
      
            
      <span style='display: block; font-size: 32px; margin-top: 45px;'>
          给我留言</span>

      <form id="feedback_form" action="/n/feedback" method="post">
        {% csrf_token %}
        <div class="input-container">
            <input name='contact' placeholder="联系方式" type="text" />
        </div>
        
        <div class="tarea-container">
            <textarea name='content' placeholder="写下您想说的..."></textarea>
        </div>
        <div class="input-container">
        <input id='feedback_btn' type="submit" value="发送" />
        </div>
     </form>

    </div>

    <div class="footer" style="padding-top: 30px; margin-top: 30px; border-top: 1px solid #dcdcdc;">
      <table border="0" width='100%' style="font-size: 12px;color: #68696b;">
        <tr>
          <td>©2015 <a href="http://dondon.im">咚咚</a></td>
          <td width="10%" style='text-align: right;'><a href="http://weibo.com/niannian2014"><img alt="微博" src='{{STATIC_URL}}/nian/img/weibo_s.png' width="20" /></a></td>
          <td width="10%" style='text-align: right;'><a href="mailto:junn@dondon.im"><img alt="邮箱" src='{{STATIC_URL}}/nian/img/email_s.png' width="20" /></a></td>
        </tr>
      </table>
    </div>

  </div>
  
  <script type="text/javascript" src="{{STATIC_URL}}/nian/js/feedback.js"></script>
  <script type="text/javascript" src="http://tajs.qq.com/stats?sId=36235374" charset="UTF-8"></script>
</body>
</html>